<template>
  <el-dialog
    :title="title"
    :visible.sync="dialogVisible"
    :close-on-click-modal="false"
    :before-close="handleClose"
    width="900px"
  >
    <dynForm
      ref="dataForm"
      :info-form="infoForm"
      :search-tags="searchTags"
      :rules="rules"
      :form-disable="isdisable"
      :select-list="selectList"/>
    <span v-if="!isdisable" slot="footer">
      <el-button icon="el-icon-circle-close" @click="handleClose">{{
        $t("cancel")
      }}</el-button>
      <el-button
        v-btnThrottle="doSave"
        type="primary"
        icon="el-icon-document-checked"
      >
        {{ $t("save") }}
      </el-button>
    </span>
    <div class="btn-add" style="padding: 10px 0">
      <el-button
        type="success"
        icon="el-icon-plus"
        size="small"
        @click="newAdd"
      >{{ $t("add") }}</el-button
      >
    </div>
    <dynTable
      ref="dynTable"
      :loading="false"
      :table-data="tableData"
      :table-columns="tableColumns"
    />
  </el-dialog>
</template>

<script>
import networkTips from '@/mixins/networkTips'
import mySetting from '@/mixins/mySetting'
import toolingKitApi from '@/api/Tooling/toolingKit'
import toolingBasicInfoApi from '@/api/Tooling/toolingBasicInfo'
import { getModuleList } from '@/api/public'
export default {
  name: 'ToolingKitForm',
  components: {},
  mixins: [mySetting, networkTips],
  props: {},
  data() {
    return {
      title: '',
      dialogVisible: false,
      infoForm: {},
      selectList: {},
      isdisable: false,
      searchTags: [
        { label: this.$t('custName'), prop: 'custName', tag: 'DynInput' },
        { label: this.$t('productName'), prop: 'productName', tag: 'DynInput' },
        { label: this.$t('packageType'), prop: 'packageType', tag: 'DynInput' },
        { label: this.$t('processFlow'), prop: 'processFlowList', tag: 'DynSelect', multiple: true },
        { label: this.$t('remark'), prop: 'remark', tag: 'DynInput' }
      ],
      rules: {
        custName: [
          { required: true, message: this.$t('entercustomercode'), trigger: 'blur' }
        ],
        productName: [
          { required: true, message: this.$t('entertheproductmodel'), trigger: 'blur' }
        ],
        packageType: [
          { required: true, message: this.$t('enterthepackageform'), trigger: 'blur' }
        ],
        processFlowList: [
          { required: true, message: this.$t('entertheproductionprocess'), trigger: 'change' }
        ]
      },
      tableData: [],
      bringModeList: [],
      attachmentList: [],
      tableColumns: Object.freeze(
        [
          { prop: 'toolingType', label: this.$t('toolingType'), templete: (_scope) => {
            return (
              <el-select
                v-model={_scope.row.toolingType}
                disabled={this.isdisable}
                clearable
                size='small'
              // on-change={this.getModelList.bind(this, _scope.row)}
              >
                {this.attachmentList.map((item, index) => {
                  return (
                    <el-option
                      key={index}
                      label={item.name}
                      value={item.id}
                    />
                  )
                })}
              </el-select>
            )
          } },
          { prop: 'cnt', label: this.$t('ToolingNum'), templete: (_scope) => {
            return (
              <el-input
                v-model={_scope.row.cnt}
                disabled={this.isdisable}
                clearable
                size='small'
              />
            )
          } },
          { prop: 'bringMode', label: this.$t('Bringoutmode'), templete: (_scope) => {
            return (
              <el-select
                v-model={_scope.row.bringMode}
                disabled={this.isdisable}
                clearable
                size='small'
              >
                {this.bringModeList.map((item, index) => {
                  return (
                    <el-option
                      key={index}
                      label={this.$t(item.name)}
                      value={item.id}
                    />
                  )
                })}
              </el-select>
            )
          } },
          { prop: 'toolingModel', label: this.$t('toolingModel'), templete: (_scope) => {
            return (
              <el-select
                v-model={_scope.row.toolingModel}
                disabled={this.isdisable}
                clearable
                size='small'
                on-focus={() => this.getToolingModelList(_scope.row)}
              >
                {(_scope.row.typeModelList || []).map((item, index) => {
                  return (
                    <el-option
                      key={index}
                      label={item.name}
                      value={item.id}
                    />
                  )
                })}
              </el-select>
            )
          } },
          { prop: '', label: this.$t('delete'), templete: (_scope) => {
            return (
              <el-button
                disabled={this.isdisable}
                type='text'
                size='small'
                on-click={() => this.handleDelete(_scope.$index)}
              >{ this.$t('delete') }</el-button>
            )
          } }
        ]
      )
    }
  },
  methods: {
    newAdd() {
      this.tableData.push({})
    },
    handleDelete(index) {
      this.tableData.splice(index, 1)
    },
    handleOpen(id = null, bool = false) {
      if (id) {
        this.isdisable = bool
        this.title = bool ? this.$t('view') : this.$t('modify')
        toolingKitApi.getInfos({ id }).then((res) => {
          this.infoForm = res.data
          this.tableData = res.data.toolingSuitsList
        })
      } else {
        this.title = this.$t('add')
      }
      this.getBringModeList()
      this.getAttachment()
      this.getProcessFlowList()
      this.dialogVisible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].$refs['dynForm'].clearValidate()
      })
    },
    doSave() {
      this.$refs['dataForm'].$refs['dynForm'].validate((valid) => {
        if (valid) {
          if (this.infoForm.id) {
            toolingKitApi
              .doUpdate(this.$clearNull(this.infoForm))
              .then((res) => {
                this.netTips(res, this.handleClose, this.handleUpdate)
              })
          } else {
            this.infoForm.toolingSuitsList = this.tableData
            toolingKitApi.doAdd(this.$clearNull(this.infoForm)).then((res) => {
              this.netTips(res, this.handleClose, this.handleUpdate)
            })
          }
        } else {
          return false
        }
      })
    },
    // 触发父组件更新
    handleUpdate() {
      this.$emit('initList')
    },
    // 关闭弹窗
    handleClose() {
      Object.assign(this.$data, this.$options.data.call(this))
    },
    // 带出模式下拉框
    async getBringModeList() {
      const res = await getModuleList({ enumName: 'EnumBringMode' })
      this.bringModeList = res.data
    },
    // 获取备件类型
    async getAttachment() {
      const res = await toolingBasicInfoApi.GetToolingTypeList()
      this.attachmentList = res.data
    },
    // 获取备件型号
    // async getModelList(row) {
    //   this.$set(row, 'toolingModel', '')
    //   const res = await toolingKitApi.getByTypeModelList({ toolingType: row.toolingType })
    //   this.$set(row, 'typeModelList', res.data)
    // },
    // 获取生产流程列表
    async getProcessFlowList() {
      const res = await toolingKitApi.getProcessFlowList()
      this.$set(this.selectList, 'processFlowList', res.data)
    },
    getToolingModelList(row) {
      toolingKitApi.getByTypeModelList({ toolingType: row.toolingType }).then(res => {
        this.$set(row, 'typeModelList', res.data)
      })
    }
  }
}
</script>

<style scoped lang="scss">
::v-deep .el-form-item {
  width: 48%;
}
.btn-add {
  display: flex;
  justify-content: flex-end;
}
</style>
